<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			#login_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				padding-bottom: 55px;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			/*----输入框----*/
			
			#login_main input[type=text],
			#login_main input[type=password] {
				width: 100%;
				border: none;
				outline: none;
				height: 100%;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			
			#login_main input {
				margin: auto;
				width: 94%;
				display: block;
				border: none;
				outline: none;
				height: 3em;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			/*----按钮----*/
			
			.btnBottom {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 100%;
				/*position: fixed;*/
				margin-top: 100px;
				text-align: center;
			}
			
			.myLogin {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.mycannotLogin {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.tiaozhuan_zhuce {
				display: block;
				float: left;
				width: 30%;
				margin-top: 15px;
				color: #A1A1A1;
			}
			
			.btnBottom a:nth-child(3) {
				margin-left: 20%;
				border-right: 1px solid #DEDEDE;
			}
			
			.btnBottom a:nth-child(4) {
				margin-right: 20%;
			}
			/*----验证提示----*/
			
			.yanzhengtishi {
				color: #FF0000;
				margin-top: 5px;
				text-align: left;
				height: 25px;
				font-size: 14px;
				width: 90%;
				margin: 0 auto;
			}
			
			.wrongB {
				border-color: #FF0000 !important;
			}
			
			.trueB {
				border-color: #0070B4 !important;
			}
			/*----验证码区域----*/
			
			.inputAndPic {
				margin-left: 3%;
				margin-right: 3%;
			}
			
			#yzm {
				width: 65% !important;
				float: left;
				height: 40px;
				border: 1px solid #E9E9E9;
			}
			
			.inputAndBtn {
				width: 94%;
				height: 55px;
				margin-left: 3%;
				margin-right: 3%;
				border: 1px solid #E9E9E9;
				border-radius: 8px;
			}
			
			#loginYzm {
				width: 65% !important;
				height: 100% !important;
				float: left;
				border: none !important;
				outline: none !important;
			}
			
			#my_loginYzm {
				margin-top: 9px;
			}
			
			.primary {
				color: #0070B4 !important !important;
				font-size: 1em;
			}
			
			.login_mid {
				padding-top: 70px;
			}
			
			.weui_dialog_ft .weui_btn_dialog:first-child {
				color: #0070B4;
			}
			
			.weui_dialog_ft .weui_btn_dialog:last-child {
				color: #666666;
			}
			
			footer li a {
				position: relative;
				top: -2px;
			}
			
			footer li p {
				position: relative;
				top: -6px;
			}
			
			.loginZysx {
				float: left;
				margin-top: 80px;
				color: #555555;
				font-weight: bold;
				font-size: 1.1em;
			}
			
			.loginZysx li {
				padding-left: 1em;
				color: #666666;
				font-size: 0.8em;
				font-weight: 100;
				list-style-type: circle !important;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="login_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="my.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">帐号管理</p>
				</div>
			</div>
			<div class="login_mid">
				<!--输入手机号-->
				<div class="inputAndBtn" style="margin-top: 20px;">
					<input type="text" name="" id="myphone" placeholder="请输入管理员帐号" onkeyup="changeBlue()" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--输入密码-->
				<div class="inputAndBtn">
					<input type="password" name="" id="myPwd" placeholder="请输入密码" onkeyup="changeBlue()" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--验证码与发送验证码按钮区域-->
				<div class="inputAndBtn">
					<input type="text" name="" id="loginYzm" placeholder="请输入验证码" onkeyup="changeBlue()" />
					<!--<a href="javascript" id="sendYzm" style="display: none;">发送验证码</a>
				<a href="javascript" id="cannotSendYzm">发送验证码</a>-->
					<canvas id="my_loginYzm" class="yzm" onclick="yzmNum()"></canvas>
				</div>
				<p class="yanzhengtishi" id="login_TS"></p>

				<div class="btnBottom">
					<a href="javascript:;" class="myLogin" id="login" style="display: none;">登&nbsp;&nbsp;录</a>
					<a href="javascript:;" class="mycannotLogin" id="cannotlogin">登&nbsp;&nbsp;录</a>
					<!--<a class="tiaozhuan_zhuce" href="register.html" style="border: none; width: 60%; text-align: center;">注册账号</a>-->
					<!--<a class="tiaozhuan_zhuce" href="forgetPwd.html">忘记密码</a>-->
				</div>
			</div>

			<ul class="loginZysx">
				<li>公众用户直接登录即可</li>
				<li>行业内人员提交报送信息请点击“报送”按钮后登录</li>
				<li>后台管理员请点击“管理员”按钮后登录</li>
			</ul>

			<footer>
				<li>
					<a href="Login.html">
						<div>
							<img src="img/Login/gzIcon.png" />
						</div>
						<p style="color: #707070;">公众</p>
					</a>
				</li>
				<li>
					<a href="login_bs.html">
						<div>
							<img src="img/Login/bsIcon.png" />
						</div>
						<p style="color: #707070;">报送</p>
					</a>
				</li>
				<li>
					<a href="#">
						<div>
							<img src="img/Login/gly_1.png" />
						</div>
						<p style="color: #1296db;">管理员</p>
					</a>
				</li>
			</footer>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//			var num0 = 0;
			//			var num1 = 0;
			//			var num2 = 0;
			//验证手机号
			//			$("#myphone").keyup(function() {
			//				var phone = /^[1][34578][0-9]{9}$/;
			//				var Input = $(this).parent();
			//				if(phone.test(this.value)) {
			//					Input.removeClass("wrongB");
			//					Input.addClass("trueB");
			//					Input.next().html("");
			//					num0 = 1;
			//				} else {
			//					Input.removeClass("trueB");
			//					Input.addClass("wrongB");
			//					Input.next().html("请先输入正确的手机号码");
			//					num0 = 0;
			//				}
			//				changeBlue();
			//			});
			//验证自定义密码
			//			$("#myPwd").keyup(function() {
			//				var Pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
			//				var Input = $(this).parent();
			//				if(Pwd.test(this.value)) {
			//					Input.removeClass("wrongB");
			//					Input.addClass("trueB");
			//					Input.next().html("");
			//					num1 = 1;
			//					//					document.getElementById("cannotregister").style.display = "none";
			//					//					document.getElementById("register").style.display = "block";
			//				} else {
			//					Input.removeClass("trueB");
			//					Input.addClass("wrongB");
			//					Input.next().html("请输入您的8-18位密码");
			//					num1 = 0;
			//				}
			//				changeBlue();
			//			});
			var nn;
			window.onload = function() {
				var canvas = document.getElementById("my_loginYzm");
				canvas.width = 100;
				canvas.height = 30;
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(0,0,0)";
				ctx.fillRect(0, 0, 100, 30);
				ctx.font = "25px 微软雅黑";
				ctx.fillStyle = getRandomColor();
				yzmNum();
				ctx.fillText(nn, 25, 22);
			}

			function yzmNum() {
				var ran = parseInt(Math.random() * 10000) % 9000 + 1000;
				nn = ran;
				var canvas = document.getElementById("my_loginYzm");
				canvas.width = 100;
				canvas.height = 33;
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(0,0,0)";
				ctx.fillRect(0, 0, 100, 33);
				ctx.font = "26px 微软雅黑";
				ctx.fillStyle = getRandomColor();
				ctx.fillText(nn, 22, 26);
				for(var i = 0; i < 10; i++) {
					var w1 = parseInt(Math.random() * 10000) % canvas.width;
					var h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.moveTo(w1, h1);
					w1 = w1 = parseInt(Math.random() * 10000) % canvas.width;
					h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.lineTo(w1, h1);
					ctx.strokeStyle = getRandomColor();
					ctx.stroke();
				}
				for(var i = 0; i < 100; i++) {
					ctx.beginPath();
					var w1 = parseInt(Math.random() * 10000) % canvas.width;
					var h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.moveTo(w1, h1);
					ctx.lineTo(w1 + 1, h1 + 1);
					ctx.strokeStyle = getRandomColor();
					ctx.stroke();

				}
				ctx.fillStyle = "rgba(255,20,0,0.2)";
				ctx.fillRect(0, 0, 100, 33);
			}

			function getRandomColor() {
				var r = parseInt(Math.random() * 10000) % 256;
				var g = parseInt(Math.random() * 10000) % 256;
				var b = parseInt(Math.random() * 10000) % 256;
				return "rgb(" + r + "," + g + "," + b + ")";
			}
			//验证输入的验证码
			//			$("#loginYzm").keyup(function() {
			//				var Input = $(this).parent();
			//				if(this.value == nn) {
			//					Input.next().html("");
			//					Input.removeClass("wrongB");
			//					Input.addClass("trueB");
			//					num2 = 1;
			//				} else {
			//					Input.removeClass("trueB");
			//					Input.addClass("wrongB");
			//					Input.next().html("验证码看不清楚？可点击更换");
			//					num2 = 0;
			//				}
			//				changeBlue();
			//			});

			function changeBlue() {
				//				var ts = document.getElementById("login_TS");
				//				ts.innerHTML = "";

				var val1 = $("#myphone").val();
				var val2 = $("#myPwd").val();
				var val3 = $("#loginYzm").val();
				//暂时～～～～～～～～～～
				if(val1 != "" && val2 != "" && val3 != "") {
					$("#cannotlogin").css("display", "none");
					$("#login").css("display", "block");
				} else {
					$("#login").css("display", "none");
					$("#cannotlogin").css("display", "block");
				}
			}

			$("#login").click(function() {
				var n1 = $("#myphone").val();
				var n2 = $("#myPwd").val();
				var allData = "USERNAME:" + n1 + ",PASSWORD:" + n2 + ",FLAG:3";
				allData = encrypt(allData);
				if($("#loginYzm").val() == nn) {
					if(window.navigator.onLine == false) {
						$.alert("请检查您的网络设置", "提示");
						//						alert("aa");
					} else {
						//						console.log(window.navigator.onLine);
						$.ajax({
							type: "post",
							url: Url,
							async: false,
							data: {
								"type": "login",
								"DATA": "" + allData + ""
							},
							cache: false,
							dataType: "jsonp", //数据类型为jsonp
							jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
							jsonpCallback: "jsonpCallback1",
							success: function(data) {
								console.log(data);
								if(data.MSG == "成功") {
									//登录成功
									$.alert("登录成功", function() {
										//点击确认后的回调函数
										var username = $("#myphone").val();
										var stdCode = data.STDCODE;
										console.log("是行业内用户");
										//行业内用户
										var userJson = {
											username: username,
											HYNYH: "3", //以管理员身份登录
											stdCode: stdCode
										};
										if(!localStorage.userJson) {
											var arr = [userJson];
											//将登录用户名存入浏览器本地存储
											localStorage.userJson = JSON.stringify(arr);
											window.location.href = "index01.html";
										}

									});
								} else if(data.MSG == "失败") {
									var ts = document.getElementById("login_TS");
									ts.innerHTML = "账号或密码输入有误";
									$(".inputAndBtn").removeClass("trueB");
									$("#myPwd").val("");
									$("#login").css("display", "none");
									$("#cannotlogin").css("display", "block");
								}
							},
							error: function(data) {
								$.confirm("服务器忙，请稍后再试", "提示");
							}
						});
					}

				} else {
					console.log("验证码有误");
					var ts = document.getElementById("login_TS");
					ts.innerHTML = "";
					ts.innerHTML = "验证码输入有误";
					$("#loginYzm").parent().removeClass("trueB");
					$("#loginYzm").parent().addClass("wrongB");
				}
			});
		</script>
	</body>

</html>